//获取是否有登录这个信息
const login = JSON.parse(localStorage.getItem('login'))
//显示时间
fn()
function fn(){
  const sj = document.querySelector('header>section>nav>.box>span:last-child')
  // 打开页面，能立即显示当前的日期。
  let n = new Date()
  let h = n.getHours()<10? '0'+n.getHours():n.getHours()
  let m = n.getMinutes()<10? '0'+n.getMinutes():n.getMinutes()
  let s = n.getSeconds()<10? '0'+n.getSeconds():n.getSeconds()
  sj.innerHTML=`
  ${n.getFullYear()}/${n.getMonth()+1}/${n.getDate()}/${h}:${m}:${s}
  `
}
let j = setInterval(fn,1000)
function t(){
  clearInterval(j)
}

//切换图片
// picture()
const arr = ['feng.jpg','feng1.png','feng3.png','feng4.png']
const arr1 = ['让读书走进人生，让人生飘逸书香————','书香浸润心灵，阅读伴我成长————','读书成就梦想，知识照亮人生————','读书点燃智慧，知识照耀人生————']
let i = 1
function picture(){
  XR()
  i===4? i=1:i++
}
setInterval(picture,5000)
//点击li切换图片
const li = document.querySelectorAll('section>ul li')
  li.forEach((item,index)=>{
  item.addEventListener('click',()=>{
     i=index+1
     XR()
  })
})
//渲染图片
function XR(){
  const img = document.querySelector('section>img')
  const h3 = document.querySelector('section>h3')
  img.src=`imgas/${arr[i-1]}`
  h3.innerHTML=arr1[i-1]
  document.querySelector('section>ul .activeLi').classList.remove('activeLi')
  document.querySelector(`section>ul li:nth-child(${i})`).classList.add('activeLi')
}

//左侧导航栏
function Navigation(){
  const arr = [
    ['图书馆','这些能够触摸的艺术品对我来讲，是极有意义的，然而，与其说它们是供人触摸的，毋宁说它们是供人观赏的，而我只能猜测那种我看不见的美。我能欣赏希腊花瓶的简朴的.线条，但它的那些图案装饰我却看不到——'],
    ['学生生活','天生我才，必有大用，今日不用，明日必用——'],
    ['交流互动','用心观察生活，感悟人生真谛，让设计与生活互动。——'],
    ['文化教育','教育的艺术不在传授，而在鼓舞和唤醒。——蔡元培']
  ]
  const ul = document.querySelectorAll('header>aside>tool>ul>li') 
  const box = document.querySelector('header>.box1') 
  ul.forEach((item,index)=>{
    item.addEventListener('mouseenter',(e)=>{
      box.querySelector('h2').innerHTML = arr[index][0]
      box.querySelector('div').innerHTML = arr[index][1]
      box.classList.toggle('activeBox')
      box.style.animation='he 2s'
    })
    item.addEventListener('mouseleave',(e)=>{
      box.classList.toggle('activeBox')
    })
  })
}
Navigation()

//视口768以下左侧栏目点击才显示
function shi(){
  const dian = document.querySelector('header>section>nav>div.iconfont')
  const aside =document.querySelector('header>aside')
  dian.addEventListener('click',()=>{
    aside.classList.toggle('aside_11')
  })
}
shi()

//显示搜索框
function sou(){
  const boXx = document.querySelector('.boXx')
  const box = document.querySelector('header>aside tool>.box')
  box.addEventListener('click',(e)=>{
    if(login!==null){
      boXx.classList.toggle('cover1')
      document.body.style.overflow='hidden'
    }else{alert('请登录')}
  })
  document.querySelector('.boXx>.box1>.iconfont').onclick=()=>{
    boXx.classList.toggle('cover1')
    document.body.style.overflow='visible'
  }
}
sou()

//搜索检索
const resource=document.querySelector('.boXx>.box1>.box2>.box1 .resource')
const ul =document.querySelector('.boXx>.box1>.box2>ul')
function JIan(){
  resource.onclick=()=>{
    ul.classList.toggle('cover1')
    }
 ul.onclick=(e)=>{
    if(e.target.tagName==='LABEL') resource.querySelector('u').innerText = e.target.innerHTML
  }
}
JIan()
//更改背景色
function bei(){
    const arr = ['118, 127, 21','186, 34, 39','62, 144, 176','161, 158, 143']
    const box1 = document.querySelector('.boXx>.box1')
    const box3 = document.querySelectorAll('.boXx>.box1>.box2>.box3 span')
    box3.forEach((item,index)=>{
      item.onclick=(e)=>{
        box1.style.backgroundColor=`rgb(${arr[index]},0.3)`
        box3.forEach(item=>{item.classList.remove('yan')})
        e.target.classList.add('yan')
      }
    })
}
bei()

//搜索书籍作者
const Arr = [
  ['nav_1.jpg','推荐','冯唐','生活','《活着活着就老了》收录了冯唐近年来的代表作','《活着活着就老了》'],
  ['nav_2.jpg','最热','李世强','生活','在当下时代背景下融合更多实用内容，指导我们现代人更好地交际、生活、管理及与社会和谐共处','《生活需要分寸感》'],
  ['nav_3.jpg',' 最新','三浦紫苑','生活','西餐馆学徒藤丸阳太爱慕着植物学研究员本村纱英，但纱英对植物的兴趣远超美食和人','《无爱世界》'],
  ['nav_4.jpg','最热','张岱年、程宜山','教育','《中国文化精神》以古今中外为参照，在历史的长河中对中国文化的品格','《中国文化精神》'],
  ['nav_5.jpg','推荐','檀传宝','教育','《本书分上、下两篇。上篇为主体部分，是13篇记述当代卓越教师之风范的教育随笔，下篇则为研究三位教育大家（诺丁斯、黄济、鲁洁）教育思想的学术论文','《先生之德风》'],
  ['nav_6.jpg','最新','钱穆','历史','该书论述了从远古至民国初年的中国历史演变，深入探讨了政治、经济、社会、学术、宗教和兵制等方面的内容','《国史大纲》'],
  ['nav_7.jpg','最热','吴军','科技','全书从远古科技、古代科技、近代科技和现代科技四个部分','《全球科技通史》'],
  ['nav_8.jpg','推荐','安托万·德·圣-埃克苏佩里','文学','讲述了小王子从自己星球出发前往地球的过程中，所经历的各种历险','《小王子》'],
  ['nav_9.jpg','最热','罗伯特·清崎','财经','《主要内容是讲述清崎亲身经历的财富故事，展示了“穷爸爸”和“富爸爸”截然不同的金钱观和财富观，穷人为钱工作，富人让钱为自己工作','《穷爸爸富爸爸》'],
  ['nav_10.jpg','推荐',' 布赖恩特','计算机','《深入理解计算机系统》是理解计算机系统首选书目，是10余万程序员的共同选择。卡内基-梅隆、北京大学、清华大学、上海交通大学等国内外众多知名高校选用指定教材','《深入理解计算机系统》'],
  ['nav_11.jpg','最热','睡觉会变白','娱乐','主角本是芸芸众生中普通的一员，他重生到了1997年，决心活出不一样的人生','《文艺时代》'],
  ['nav_12.jpg','最热','梁山老鬼','小说','这部作品是一部现代网络小说，讲述了主角云铮穿越成大乾王朝六皇子的故事','《无敌六皇子》']
]
function shuJi(){
  const ipt = document.querySelector('.boXx>.box1>.box2>.box1 input')
  //点击搜索
  document.querySelector('.boXx>.box1>.box2>.box1>span').addEventListener('click',(e)=>{
    const n = resource.querySelector('u').innerHTML
    const a=n==='全部'?Arr.filter(item=>{return item[2]===`${ipt.value}`}):Arr.filter(item=>{return item[2]===`${ipt.value}`&&item[3]===`${n}`})
    ipt.value=''
     XR1(a)
  })
  //回车搜索
  ipt.addEventListener('keydown',()=>{
    const n = resource.querySelector('u').innerHTML
    const a=n==='全部'?Arr.filter(item=>{return item[2]===`${ipt.value}`}):Arr.filter(item=>{return item[2]===`${ipt.value}`&&item[3]===`${n}`})
    ipt.value=''
    XR1(a)
  })
}
shuJi()
//渲染
function XR1(arr=[]){
  const ol = document.querySelector('.boXx>.box1>ol')
  let str= ''
   arr.forEach(item=>{
    str+= `
    <li>
        <img src="imgas/${item[0]}" alt=""><br>
        <span><b>作者</b>:${item[2]}</span>
        <span><b>书名</b>:${item[5]}</span>
        <span><b>详情</b>${item[4]}</span>
        <span><b>分类</b>:${item[3]}</span>
    </li>
    `
  })
  ol.innerHTML = str
}


//登录成功显示区域
function LoginSuccessful(){
    const a = document.querySelectorAll('header>section>nav>ul a')
    const Jump = document.querySelectorAll('header>aside tool>ul a')
    //判断是否登录
    if(login!==null){
      //显示登录信息
      a[0].innerHTML = login[0].username
      a[0].onclick=(e)=>{e.preventDefault()}
      a[1].innerHTML = '退出'
      a[1].onclick=(e)=>{
        if(confirm('确定要退出账号嘛？')){
          localStorage.removeItem('login');
          e.preventDefault()
          localStorage.removeItem('bookCollection')
          location.reload()
          }else{
            e.preventDefault()
          }
        }
    }else{
      //未登录不能点击图书馆、教室与搜索框页面
      Jump[0].onclick=(e)=>{e.preventDefault();alert('请登录')}
      Jump[1].onclick=(e)=>{e.preventDefault();alert('请登录')}
    } 
}
LoginSuccessful()